<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>购物车</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <!--引入字体图标相关的样式文件-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><!---->
    <!--引入Font Awesome框架实现字体图标效果-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--引入外部css文件,首页样式-->
    <link rel="stylesheet" href="css/index.css">
    <!--引入外部css文件,购物车式-->
    <link rel="stylesheet" href="css/cart.css">
    <!--引入iconfont字库-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2932829_gw0c9i9k6gd.css">
    <!--引入jQuery框架文件,使用CDN服务器进行引入-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!--头部标签-->
<header id="miao">
    <div class="header">
        <!--上导航条-->
        <div class="header-top" style="position: absolute;width: 100%">
            <!--手机下单二维码-->
            <div></div>
            <!--关注微信二维码-->
            <div></div>
            <div class="container" style="width: 1168px">
                <!--左div-->
                <div class="con-left">
                    <p class="text-color-9">嗨，欢迎来订花乐！</p>
                    <a href="">
                        <!--微信图标-->
                        <i class=" iconfont icon-floristweixin" style="color: rgb(136,78,34);"></i>
                        <span class="text-color-9">关注微信</span>
                    </a>
                </div>
                <!--右div-->
                <div class="con-right">
                    <a href="" class="text-color-9">你好，请登录</a>
                    <span class="text-color-9">|</span>
                    <a href="" class="text-color-9">免费注册</a>
                    <span class="text-color-9">|</span>
                    <a href="" class="text-color-9">订单查询</a>
                    <span class="text-color-9">|</span>
                    <a href="" class="text-color-9">
                        <!--购物车图标-->
                        <i class="iconfont icon-floristgouwuche" style="color: rgb(136,78,34);"></i>
                        <span class="text-color-9">购物车</span>
                        <span class="text-color-9">(0)</span>
                    </a>
                    <span class="text-color-9">|</span>
                    <a href="#" class="text-color-9">手机下单</a>
                </div>
            </div>
        </div>
        <!--下导航条-->
        <div class="header-bottom">
            <!--搜索栏-->
            <div class="container" style="width: 1168px">
                <!--商标-->
                <div class="logo-img">
                    <a href="">
                        <img src="images/logo.png" alt="网页logo">
                    </a>
                </div>
                <div class="phone-search">
                    <p class="phone-search-text">
                        <i class="glyphicon glyphicon-phone-alt" style="color: rgb(136,78,34) ;font-size: 22px;"></i>
                        <span class="text-color-9" style="font-size: 17px;">400-0606-1520</span>
                    </p>
                </div>
            </div>
            <!--分类栏-->
            <div class="container" id="subject" style="height: 35px">

            </div>
        </div>
    </div>
</header>
<!--头部标签结束-->
<!--主体区域开始了-->
<div class="cart-maincont">
    <!--订单信息-->
    <div class="goods-mess content">
        <div class="goods-allcont">
            <div class="goods-title">
                <div class="goods-allcheck single-area">
                    <input style="position: relative; top: 1px;" name="total" type="checkbox" onchange="selectAll(this)">
                    &nbsp;
                    全选
                </div>
                <div class="goods-name single-area">
                    <p>商品信息</p>
                </div>
                <div class="goods-entry single-area">
                    <p>市场价</p>
                </div>
                <div class="goods-entry single-area">
                    <p>店铺价</p>
                </div>
                <div class="goods-entry single-area">
                    <p>数量</p>
                </div>
                <div class="goods-entry single-area">
                    <p>操作</p>
                </div>
            </div>
            <div class="goods-cont">
                <div class="goods-items">
                    <div class="goods-allcheck single-area">
                        <label><input name="goods" value="1410" data-price="239" data-num="1" data-id="1410" type="checkbox" onchange="selectCurrent(this)"></label>
                    </div>
                    <div class="goods-name single-area">
                        <a href="/proDetail.html?pid=459">
                            <img src="https://upyun.dinghuale.com/uploads/20201208/202012081602487979.jpg" class="goods-image">
                            &nbsp;&nbsp;
                            <p class="goods-des">爱的火烈鸟【网红款】</p>
                        </a>
                    </div>
                    <div class="goods-entry single-area">
                        <p><del class="text-light">￥329</del></p>
                    </div>
                    <div class="goods-entry single-area">
                        <p class="redfont">￥239</p>
                    </div>
                    <div class="goods-entry single-area">
                        <p>1</p>
                    </div>
                    <div class="goods-entry single-area cursorponiter" onclick="deleteGoods('1410')">
                        <i class="glyphicon glyphicon-trash"></i>
                    </div>
                </div>
                <div class="goods-items">
                    <div class="goods-allcheck single-area">
                        <label><input name="goods" value="1409" data-price="299" data-num="2" data-id="1409" type="checkbox" onchange="selectCurrent(this)"></label>
                    </div>
                    <div class="goods-name single-area">
                        <a href="/proDetail.html?pid=191">
                            <img src="https://upyun.dinghuale.com/uploads/20210426/202104261208472868.jpg" class="goods-image">
                            &nbsp;&nbsp;
                            <p class="goods-des">浪漫告白</p>
                        </a>
                    </div>
                    <div class="goods-entry single-area">
                        <p><del class="text-light">￥439</del></p>
                    </div>
                    <div class="goods-entry single-area">
                        <p class="redfont">￥299</p>
                    </div>
                    <div class="goods-entry single-area">
                        <p>2</p>
                    </div>
                    <div class="goods-entry single-area cursorponiter" onclick="deleteGoods('1409')">
                        <i class="glyphicon glyphicon-trash"></i>
                    </div>
                </div>
                <div class="goods-items">
                    <div class="goods-allcheck single-area">
                        <label><input name="goods" value="1408" data-price="229" data-num="1" data-id="1408" type="checkbox" onchange="selectCurrent(this)"></label>
                    </div>
                    <div class="goods-name single-area">
                        <a href="/proDetail.html?pid=215">
                            <img src="https://upyun.dinghuale.com/uploads/20200630/202006301617407670.jpg" class="goods-image">
                            &nbsp;&nbsp;
                            <p class="goods-des">浪漫满屋</p>
                        </a>
                    </div>
                    <div class="goods-entry single-area">
                        <p><del class="text-light">￥289</del></p>
                    </div>
                    <div class="goods-entry single-area">
                        <p class="redfont">￥229</p>
                    </div>
                    <div class="goods-entry single-area">
                        <p>1</p>
                    </div>
                    <div class="goods-entry single-area cursorponiter" onclick="deleteGoods('1408')">
                        <i class="glyphicon glyphicon-trash"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="goods-settlement">
            <div class="goods-settlementcont">
                <div class="goods-allcheck single-area">
                </div>
                <div class="goods-name single-area cursorponiter">
                    <button onclick="deleteSelected()" class="btn-danger">
                        删除
                    </button>
                </div>
                <div class="goods-entry goods-allnumber single-area">
                    <p>共</p>
                    <p id="total-num" class="large-size">0</p>
                    <p></p>
                    <p>件商品</p>
                </div>
                <div class="goods-entry goods-payable single-area">
                    <p>应付金额:</p>
                    <p class="redfont large-size">￥<span id="total-price">0</span></p>
                    <p></p>
                </div>
                <div class="goods-entry goods-allsettlement single-area">
                    <div onclick="submitCarts()" href="/subOrder.html" class="a-colorfont cursorponiter">结算</div>
                </div>
            </div>
        </div>
    </div>
    <!--热选商品展示-->
    <div style="width: 1200px;margin: 30px auto 10px;">
        <p style="font-size: 20px;font-weight: bold;">热选商品推荐</p>
    </div>
    <div class="guess-cont content">
        <div class="alike-pro">
            <div class="alike-list clearfix">
                <a href="/proDetail.html?pid=270" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20201026/202010260915414084.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">永恒回忆</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥298</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量16022笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=215" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20200630/202006301617407670.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">浪漫满屋</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥229</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量17229笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=261" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20200826/202008261130205022.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">幸福守候</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥239</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量15632笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=436" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20210426/202104261257415133.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">缘分天空</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥339</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量13960笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=219" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20210426/202104261158351537.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">相濡以沫</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥229</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量12658笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=196" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20210426/202104260950064701.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">此生不渝</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥168</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量16256笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=191" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20210426/202104261208472868.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">浪漫告白</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥299</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量19578笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=298" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20210519/202105191204581151.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">为你心动</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥319</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量16877笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=323" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20210426/202104261310519646.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">满天繁星</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥299</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量14598笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=202" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20200630/202006301514481588.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">不忘初心</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥189</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量10548笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=521" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20210104/202101041606278298.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">情定今生</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥659</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量13845笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=281" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20200707/202007070955492666.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">真心真意</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥309</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量12856笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=300" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20210426/202104261016201129.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">感恩的心</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥159</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量13669笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=283" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20200707/202007071003531298.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">挚爱一生</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥189</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量9856笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=455" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20201208/202012081501255872.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">温暖阳光</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥269</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量12710笔</span>
                    </div>
                </a>
                <a href="/proDetail.html?pid=232" class="module-pro-item fl">
                    <div class="pro-img">
                        <img src="https://upyun.dinghuale.com/uploads/20200818/202008181631286320.jpg" alt="">
                    </div>
                    <p class="text-color-6 ellipsis">情有独钟</p>
                    <div class="clearfix pro-item-bottom">
                        <p class="pro-price fl align-center">￥629</p>
                        <p></p>
                        <span class="text-color-9 fr align-center">销量9877笔</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<!--主体区域结束了-->
<!--尾部区域开始-->
<footer>
    <div class="footer" style="margin-top: 10px;">
        <!--尾部上区域-->
        <div class="footer-top" style="background: #fff;">
            <div class="footer-top-all container" style="height: 210px;width: 1200px">
                <div class="logo-img">
                    <img src="images/logo.png" alt="">
                </div>
                <div class="nav-module" style="height: 210px">
                    <div class="footer-module fl">
                        <p>热门导航</p>
                        <div>
                            <a href="">网站首页</a>
                            <a href="">爱情鲜花</a>
                            <a href="">订单查询</a>
                            <a href="">全部商品</a>
                        </div>
                    </div>
                    <div class="footer-module fl">
                        <p>客户服务</p>
                        <div>
                            <div class="footer-nav fl">
                                <a href="">关于我们</a>
                                <a href="">服务声明</a>
                                <a href="">订花流程</a>
                                <a href="">支付方式</a>
                            </div>
                            <div class="footer-nav fl" style="margin-left: 20px">
                                <a href="">配送说明</a>
                                <a href="">售后服务</a>
                                <a href="">隐私条款</a>
                                <a href="">联系我们</a>
                            </div>
                        </div>
                    </div>
                    <div class="footer-module fl" style="border:none">
                        <p>联系我们</p>
                        <div class="footer-nav">
                            <a href="">意见反馈</a>
                            <a href="">工作时间:07:00-23:00</a>
                            <a href="">7*24小时在线订购</a>
                            <a href="">全国热线:400-060-1520</a>
                        </div>
                    </div>
                    <div class="erweima fr">
                        <div class="erweima-img">
                            <img src="images/QRCode.jpg" alt="">
                        </div>
                        <p class="text-color-9">扫码关注微信</p>
                    </div>
                </div>
            </div>
        </div>
        <!--尾部下区域-->
        <div class="footer-bottom">
            <p class="text-color-9">Copyright©2020 &nbsp;成都勿忘我科技有限公司 &nbsp;
                <a href="https://beian.miit.gov.cn">蜀ICP备20016463号-2</a>
            &nbsp;</p>
        </div>
    </div>
</footer>
<!--尾部区域结束-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>